<template>
    <div class="music">
        <audio :src="songUrl" hidden ref="audio" @timeupdate="update"></audio>

        <!-- 头部 -->
        <music-header :songName="song.name" :author="songAuthor"></music-header>
        <!-- 音乐图片 和 进度条 -->
        <music-content :img="songPicUrl" :songCurrentTime="songCurrentTime" :songDuration="songDuration"
            @rangeVal="rangeVal"></music-content>
        <!-- 操作按钮 -->
        <div class="songs-btn">
            <!-- 上一首
            <div class="pre">
                <van-icon name="arrow-left" />
            </div> -->
            <!-- 播放 暂停 -->
            <div class="isPlay">
                <div v-show="!isPlay">
                    <van-icon name="play-circle-o" @click="songPlay" />
                </div>
                <div v-show="isPlay">
                    <van-icon name="pause-circle-o" @click="songPause" />
                </div>
            </div>
            <!-- 下一首
            <div class="next">
                <van-icon name="arrow" />
            </div> -->
        </div>
    </div>
</template>

<script>
import MusicHeader from "./music/MusicHeader.vue";
import MusicContent from "./music/MusicContent.vue"
import dayjs from "dayjs";
export default {
    name: 'Music',
    data() {
        return {
            song: [],
            songMsg: [],
            songLyric: [],
            // 是否播放音乐
            isPlay: false,
            // 歌手
            songAuthor: '',
            // 歌曲图片地址
            songPicUrl: '',
            // 歌曲播放地址 
            songUrl: '',
            // 歌曲时长
            songDuration: '',
            // 歌曲的播放进度
            songCurrentTime: '',
            // 历史音乐的id
            historyId: [],
        }
    },
    async mounted() {
        // 如果没有值就返回
        if (!this.$route.query.id) return this.$router.push('/home')
        // 请求歌曲信息
        this.song = JSON.parse(localStorage.getItem('songsHistory'))
        this.song = this.song.filter(x => x.id == this.$route.query.id)[0]

        localStorage.setItem(this.$route.query.id, JSON.stringify(this.song))
        // 在内存创建时提前将作者，等图片放到进行赋值，以防报错
        this.songAuthor = this.song.ar[0].name
        this.songPicUrl = this.song.al.picUrl

        // 获取进度条的播放时间
        if (sessionStorage.getItem(this.$route.query.id + 'currentTime',)) {
            // 缓存中有
            this.songCurrentTime = dayjs(JSON.parse(sessionStorage.getItem(this.$route.query.id + 'currentTime',))).format('mm:ss')
        } else {
            // 缓存没有就去获取
            this.songCurrentTime = dayjs(this.$refs.audio.currentTime).format('mm:ss')
            sessionStorage.setItem(this.$route.query.id + 'currentTime', JSON.stringify(this.$refs.audio.currentTime))
        }

        // 请求音乐的播放地址和歌曲时长

        const { data: { data } } = await this.$http.get('/song/url?id=' + this.$route.query.id)
        // 获取失败就返回主页面
        if (data[0].code !== 200) return this.$router.push('/home')
        // 获取成功就赋值 播放地址和时长
        this.songUrl = data[0].url
        // 播放的总时间
        this.songDuration = data[0].time
        sessionStorage.setItem('Url', JSON.stringify(data[0]))

    },


    methods: {
        // 播放音乐 
        songPlay() {
            this.isPlay = !this.isPlay
            this.$refs.audio.play()
        },
        // 暂替音乐
        songPause() {
            this.isPlay = !this.isPlay
            this.$refs.audio.pause()

        },
        // 播放进度更新
        update() {
            // 获取当前播放的时间
            if (!this.$refs.audio) return
            // console.log(Math.floor(this.$refs.audio.currentTime));
            this.songCurrentTime = this.$refs.audio.currentTime
            console.log(this.songCurrentTime);


            // 播放进度 达到 音乐时长 播放按钮变为 暂停健
            if (Math.floor(this.songCurrentTime) >= Math.floor(this.songDuration / 1000)) return this.isPlay = !this.isPlay
        },
        // 音乐被拖动
        rangeVal(val) {
            this.$refs.audio.currentTime = val
        }

    },
    components: {
        MusicHeader,
        MusicContent,
    }
}
</script>

<style lang="less" scoped>
.music {

    // 内容
    .songs-btn {
        display: flex;
        justify-content: center;
        text-align: center;
        font-size: 30px;

        .pre {
            width: 30%;
        }

        .isPlay {
            width: 30%;
        }

        .next {
            width: 30%;
        }
    }
}
</style>